<template>
 <h1>一个人的信息</h1>
 <h1>姓名: {{ name }}</h1>
 <h1>年龄: {{ age }}</h1>
 <h1>性别: {{ sex }}</h1>
<button @click="sayHello">vue3-sayHello</button>
<button @click="sayWelcome">vue2-sayWelcome</button>
<button @click="test1">vue2读取vue3中的数据和方法</button>
<button @click="test2">vue3读取vue2中的数据和方法</button>

<button @click="test">一个简单的测试</button>
</template>

<script>
// import { h } from 'vue'
export default {
  name: 'App',
  data() {
    return {
      sex: '男11'
    }
  },
  methods: {
    sayWelcome() {
      alert('欢迎哈哈哈~')
    },
    // 测试一下看能不能在vue2中调vue3中的数据和方法. 测试是可以调取的
    test1() {
      console.log(this.name)
      console.log(this.sayHello)
      this.sayHello()
    }
  },
  // 此处只是测试一下setup，暂时不考虑响应式的问题
  setup() {
    // 数据
    let name = '张三'
    let age = 18

    // 方法
    function sayHello() {
      alert(`我叫${name},我${age}岁了`)
    }

    // 在vue3中读取vue2中的数据和方法. 读不了,会报错
    function test2() {
      console.log(this.sex)
      console.log(this.sayWelcome)
      this.sayWelcome()
    }

    // 一个简单的测试
    const test = () => {
      console.log(111)
      alert('我是用es6写的啊!')
    }

    // 返回一个对象(常用)
    return {
      name: name,
      age: age,
      sayHello: sayHello,
      test2: test2,
      test
    }

    // 返回一个函数（渲染函数）
    // return () => h('h1','尚硅谷') // 页面中只显示“尚硅谷”三个字
  }
}
</script>
